<template>
	<view class="">
		<u-navbar :background="background" :border-bottom="false"></u-navbar>
		<view class="h60"></view>
		<view class=" radius20 bg-fff px30 py44 m20 loginBoxShadow">
			<!-- #ifndef MP-WEIXIN -->
			<view class="flex mb30">
				<image :src="$config.shop_logo||''" class="h92 w92 radius20" mode=""></image>
				<view class="fs36 fw-600 ml24">绑定手机号</view>
			</view>
			<u-form :borderBottom="false">
				<u-form-item>
					<view class="p10 pl30 pr30 w-max bg-f8f radius20">
						<u-input v-model="form.mobile" maxlength="11" placeholder="请输入手机号码"></u-input>
					</view>
				</u-form-item>
				<u-form-item>
					<view class="p10 pl30 pr30 w-max bg-f8f radius20 flex row-between">
						<u-input v-model="form.code" class="flex1" placeholder="请输入短信验证码"></u-input>
						<tips :mobile="form.mobile" type="register"></tips>
					</view>
				</u-form-item>
				<u-form-item>
					<view class="p10 pl30 pr30 w-max bg-f8f radius20">
						<u-input v-model="form.regcode" type="text" placeholder="请输入上级邀请码"></u-input>
					</view>
				</u-form-item>
			</u-form>
			<view class="h50"></view>
			<u-button type="warning" class=" radius20" ripple @click="submit">提交</u-button>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="flex-col col-center">
				<image :src="$config.shop_logo||''" class="h200 w200 radius20" mode=""></image>
				<view class="fs36 fw-600 pt30 ">登录{{$config.shop_title}}</view>
				<view class="h50"></view>
				<button></button>
				<u-button type="warning" class="radius20 w500" ripple open-type="getPhoneNumber"
					@getphonenumber="decryptPhoneNumber">微信授权登录</u-button>
			</view>
			<!-- #endif -->
			
			<view class="flex fs24 mt20">
				<view class="color-999">已阅读并同意</view>
				<view class="color-zs" @click="$u.route('/pages/public/text',{text:'service_agreement',tit:'用户协议'})">《用户协议》</view>
				<view class="color-999">与</view>
				<view class="color-zs" @click="$u.route('/pages/public/text',{text:'privacy_policy',tit:'隐私政策'})">《隐私政策》</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				form: {
					mobile: '',
					code: '',
					regcode: ''
				},
				background: {
					backgroundColor: 'transparent',
				}
			};
		},
		onLoad(e) {
			this.form.mobile=this.$user?.mobile||''
			this.form.regcode = e.regcode || uni.getStorageSync('regcode') || ""
		},
		methods: {
			submit() {
				let that = this
				// #ifdef MP-WEIXIN
				wx.getUserProfile({
					desc: '用于完善用户信息',
					success: (res) => {
						that.register(res)
					}
				})
				return
				// #endif
				this.register()
			},
			register(userinfo) {
				let params = {
					...this.form,
					...this.$params,
					userinfo
				}
				this.$request('/master/auth/bindMobile', params).then(res => {
					this.$msg(res.msg)
					this.$navBack()
					this.$login_success(res)
				})
			},
			decryptPhoneNumber(e) {
				console.log(e);
				let params = {
					regcode: this.form.regcode,
					...this.$params,
					...e.detail,
				}
				this.$request('/master/auth/getPhoneNumber', params).then(res => {
					this.$msg(res.msg)
					this.$navBack()
					this.$login_success(res)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		min-height: 100%;
		background: linear-gradient(145deg, rgba(253, 52, 52, 0.07) 0%, rgba(255, 255, 255, 0.1200) 35%, rgba(0, 212, 235, 0.10) 100%);
	}
</style>
